import React, { lazy, Suspense } from "react";
import { createBrowserRouter, Navigate } from "react-router-dom";
const Home = lazy(() => import(/*webpackChunkName:"Home"*/ "@/pages/Home"));
const List = lazy(() => import(/*webpackChunkName:"Home"*/ "@/pages/List"));
const QuestionCard = lazy(
  () => import(/*webpackChunkName:"Home"*/ "@/components/QuestionCard")
);
const Star = lazy(() => import(/*webpackChunkName:"Home"*/ "@/pages/Star"));
const Start = lazy(() => import(/*webpackChunkName:"Home"*/ "@/pages/Start"));
const Trash = lazy(() => import(/*webpackChunkName:"Home"*/ "@/pages/Trash"));
const Login = lazy(() => import(/*webpackChunkName:"Home"*/ "@/pages/Login"));
const Error = lazy(() => import(/*webpackChunkName:"Home"*/ "@/pages/Error"));
const Loading = lazy(
  () => import(/*webpackChunkName:"Loading"*/ "@/pages/Loading")
);
/*
*测试suspense
 let data = null;
  if (!data) {
    throw new Promise((resolve) => {
      setTimeout(() => {
        data = "kunkun";
        resolve(true);
      }, 4000);
    });
  }
*/
const router = createBrowserRouter([
  {
    path: "/home",
    element: (
      <Suspense fallback={<Loading />}>
        <Home />
      </Suspense>
    ),
    children: [
      {
        path: "start",
        element: (
          <Suspense fallback={<Loading />}>
            <Start />
          </Suspense>
        ),
      },
      {
        path: "manage",
        element: (
          <Suspense fallback={<Loading />}>
            <List />
          </Suspense>
        ),
        children: [
          {
            index: true,
            element: (
              <Suspense fallback={<Loading />}>
                <QuestionCard status={2} />
              </Suspense>
            ),
          },
          {
            path: "star",
            element: (
              <Suspense fallback={<Loading />}>
                <Star />
              </Suspense>
            ),
          },
          {
            path: "trash",
            element: (
              <Suspense fallback={<Loading />}>
                <Trash />
              </Suspense>
            ),
          },
        ],
      },
    ],
  },
  {
    path: "/",
    element: <Navigate to="/home/manage"></Navigate>,
  },
  {
    path: "login",
    element: (
      <Suspense fallback={<Loading />}>
        <Login />
      </Suspense>
    ),
  },
  {
    path: "*",
    element: (
      <Suspense fallback={<Loading />}>
        <Error />
      </Suspense>
    ),
  },
]);
export default router;
